
<template>
  <div class="main-content" style="width:1310px">
    <div style="display: flex; ">
      <!--左边部分-->
      <div style="flex: 1; width: 0 ">
        <!--博客内容-->
        <div class="card" style="padding: 30px; margin-right: 10px; margin-bottom: 5px">
          <div style="font-weight: bold;font-size:24px;margin-bottom: 20px">{{blog.title}}</div>
          <div style="color: #666666; margin-bottom: 20px">
            <span style="margin-right: 10px"><i class="el-icon-user"></i> {{blog.userName}}</span>
            <span style="margin-right: 10px"><i class="el-icon-date"></i> {{blog.date}}</span>
            <span style="margin-right: 30px"><i class="el-icon-eye"></i> {{blog.readCount}}</span>
            <span>
              <el-tag v-for="item in tagsArr"  :key="item" type="primary" style="margin-right: 10px">{{ item }}</el-tag>
            </span>
          </div>
          <div class="w-e-text" >
            <div v-html="blog.content"></div>
          </div>
        </div>
        <!--点赞收藏部分-->
        <div class="card" style="text-align: center; margin-right: 10px;margin-bottom: 5px; font-size: 20px; color: #666666">
          <span style="margin-right: 20px; cursor:pointer" @click="setLikes" :class="{'active' : blog.userLike}"><i class="el-icon-dianzan2" ></i> {{blog.likesCount}}</span>
          <span style="cursor:pointer" @click="setCollect" :class="{'active' : blog.userCollect}"><i class="el-icon-star-off" ></i> {{blog.collectCount}}</span>
        </div>
        <!--评论区部分-->
        <Comment :fid="blogId" module="博客"/>
      </div>
      <!--右边部分-->
      <div style="width: 260px;">
        <!--作者信息部分-->
        <div class="card" style="margin-bottom: 5px">
          <div style="display: flex; grid-gap:10px; margin-bottom: 10px">
            <img :src="blog.user?.avatar" alt="" style="width: 50px;height: 50px;border-radius: 50%">
            <div style="flex: 1">
              <div style="font-weight: bold;margin-bottom: 5px">{{ blog.user?.name}}</div>
              <div style="color: #666666" class="line2">{{ blog.user?.info}}</div>
            </div>
          </div>

          <div style="display: flex">
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 7px; color: #000000; font-size: 15px">文章</div>
              <div style="color: #343434">{{blog.user?.blogCount}}</div>
            </div>
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 7px; color: #000000; font-size: 15px">点赞</div>
              <div style="color: #343434">{{blog.user?.likeCount}}</div>
            </div>
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 7px; color: #000000; font-size: 15px">收藏</div>
              <div style="color: #343434">{{blog.user?.collectCount}}</div>
            </div>
          </div>
        </div>
        <!--相关推荐部分-->
        <div class="card" style="margin-bottom: 5px">
          <div style="font-weight: bold; font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid #e1e1e1">相关推荐</div>
          <div style="margin-bottom: 15px" v-for="item in recommendlist" :key="item.id">
            <a :href="'/front/blogDetail?blogId=' + item.id " target="_blank"><div  class="recommend-title line2">{{item.title}}</div></a>
            <div style="margin-right: 10px;color: #888">
              <span>阅读</span> <span style="margin-right: 10px">{{item.readCount}}</span>
              <span>点赞</span> <span>{{ item.likesCount }}</span>
            </div>
          </div>
        </div>
        <!--广告区-->
        <div class="card" style="">
          <div style="display: flex; grid-gap:10px; align-items: center">
            <div style="flex: 1">
              <div>微信打款，支持开发者</div>
              <div>😊😊😊😊😊😊😊</div>
            </div>
            <img src="../../assets/imgs/img.png" alt="" style="width: 50px; height: 50px  ">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入评论组件
import Comment from "@/components/Comment.vue"
export default {
  name: "BlogDetail",
  components: {
    Comment,
  },
  data() {
    return {
      blogId: this.$route.query.blogId,
      blog: {},  //博客对象
      tagsArr:[],  //博客标签数组
      recommendlist: [],
    }
  },
  created(){
    this.load()
    //更新阅读量（暂时前端操作）
    this.$request.put('/blog/updateReadCount/'+this.blogId)
  },
  methods: {

    //点赞效果
    setLikes() {
      this.$request.post('/likes/set',{fid: this.blogId,module:'博客'}).then(res => {
        if(res.code == '200'){
          this.$message.success('操作成功')
          this.load()  //重新加载最新数据
        }
      })
    },
    //收藏效果
    setCollect() {
      this.$request.post('/collect/set',{fid: this.blogId,module:'博客'}).then(res => {
        if(res.code == '200'){
          this.$message.success('操作成功')
          this.load()  //重新加载最新数据
        }
      })
    },
    // 获取对应博客信息
    load() {
      this.$request.get('/blog/selectById/'+ this.blogId).then(res => {
        this.blog =res.data || {}
        this.tagsArr=JSON.parse(this.blog.tags || '[]') //初始化标签数组
      })
      this.$request.get('/blog/selectRecommend/'+ this.blogId).then(res => {
        this.recommendlist =res.data || []
      })
    },
  }
}
</script>


<style >
/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 20px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  display: inline;
  zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}
p {
  line-height: 30px
}
.active {
  color: orange !important;
}
.recommend-title{
  margin-bottom: 5px;
  margin-top: 5px;
}
.recommend-title:hover{
  color: #003aa4;
}
.comment-active {
  color: #007c7c;
}
pre {
  white-space: pre-wrap; /*css-3*/
  white-space: -moz-pre-wrap; /*Mozilla,since1999*/
  white-space: pre-wrap; /*Opera4-6*/
  white-space: -o-pre-wrap; /*Opera7*/
  word-wrap: break-word; /*InternetExplorer5.5+*/
}

</style>